<script lang="tsx">
/**
 * 天气组件
 */
export default {
  name: "weather-box"
}
</script>

<script lang="tsx" setup>
import {processRequest} from "@/frame/request/constructor.ts"
import {mapKey, weatherCityCode} from "@/config/key.ts"
import {onMounted, onUnmounted, ref} from "vue"

/**
 * 定义props
 */
const props = withDefaults(defineProps<{
  //图片宽度
  imgWidth: number
  //图片高度
  imgHeight: number
  //是否显示温度
  showTemperature: boolean
  //是否显示图片
  showImage: boolean
}>(), {
  imgWidth: 36,
  imgHeight: 24,
  showTemperature: true,
  showImage: true
})

/**
 * 定义emit
 */
const emit = defineEmits<{
  (e: "weather-refresh", data: any): void
}>()

/**
 * 计时组件
 */
const timer = ref()

/**
 * 天气、时间数据
 */
const temperature = ref()
const imgData = ref("img/weather/晴.png")

/**
 * 挂载
 */
onMounted(() => {
  getWeatherData()
  timer.value = setInterval(() => {
    getWeatherData()
  }, 3600000)
})

/**
 * 卸载
 */
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})

/**
 * 获取天气信息
 */
const getWeatherData = async () => {
  const result: any = await processRequest.get(`/map/v3/weather/weatherInfo?key=${mapKey}&city=${weatherCityCode}&extensions=base`)
  const weather = result?.lives[0]
  temperature.value = weather.temperature
  emit("weather-refresh", weather)
  // region 天气判断
  if (weather.weather === "晴" || weather.weather === "未知") {
    imgData.value = "/img/weather/晴.png"
  } else if (weather.weather === "少云" || weather.weather === "晴间多云" || weather.weather === "多云") {
    imgData.value = "/img/weather/多云.png"
  } else if (weather.weather === "阴" || weather.weather === "平静") {
    imgData.value = "/img/weather/阴.png"
  } else if (weather.weather === "有风" || weather.weather === "微风" || weather.weather === "和风" || weather.weather === "清风" || weather.weather === "强风/劲风" || weather.weather === "疾风" || weather.weather === "大风" || weather.weather === "烈风" || weather.weather === "狂暴风" || weather.weather === "飓风" || weather.weather === "热带风暴" || weather.weather === "龙卷风") {
    imgData.value = "/img/weather/风.png"
  } else if (weather.weather === "霾" || weather.weather === "中度霾" || weather.weather === "重度霾" || weather.weather === "严重霾") {
    imgData.value = "/img/weather/霾.png"
  } else if (weather.weather === "阵雨" || weather.weather === "中雨" || weather.weather === "雨" || weather.weather === "中雨-大雨") {
    imgData.value = "/img/weather/中雨.png"
  } else if (weather.weather === "雷阵雨" || weather.weather === "强雷阵雨") {
    imgData.value = "/img/weather/雷雨.png"
  } else if (weather.weather === "雷阵雨并伴有冰雹") {
    imgData.value = "/img/weather/冰雹.png"
  } else if (weather.weather === "小雨" || weather.weather === "毛毛雨/细雨" || weather.weather === "小雨-中雨") {
    imgData.value = "/img/weather/小雨.png"
  } else if (weather.weather === "大雨" || weather.weather === "强阵雨" || weather.weather === "大雨-暴雨") {
    imgData.value = "/img/weather/大雨.png"
  } else if (weather.weather === "暴雨" || weather.weather === "大暴雨" || weather.weather === "特大暴雨" || weather.weather === "极端降雨" || weather.weather === "暴雨-大暴雨" || weather.weather === "大暴雨-特大暴雨") {
    imgData.value = "/img/weather/暴雨.png"
  } else if (weather.weather === "雨雪天气" || weather.weather === "雨夹雪" || weather.weather === "阵雨夹雪" || weather.weather === "冻雨") {
    imgData.value = "/img/weather/雨加雪.png"
  } else if (weather.weather === "雪" || weather.weather === "阵雪" || weather.weather === "中雪" || weather.weather === "中雪-大雪") {
    imgData.value = "/img/weather/中雪.png"
  } else if (weather.weather === "小雪" || weather.weather === "小雪-中雪") {
    imgData.value = "/img/weather/小雪.png"
  } else if (weather.weather === "大雪" || weather.weather === "大雪-暴雪") {
    imgData.value = "/img/weather/大雪.png"
  } else if (weather.weather === "浮尘" || weather.weather === "扬沙" || weather.weather === "沙尘暴" || weather.weather === "强沙尘暴") {
    imgData.value = "/img/weather/沙尘.png"
  } else if (weather.weather === "雾" || weather.weather === "浓雾" || weather.weather === "强浓雾" || weather.weather === "轻雾" || weather.weather === "大雾" || weather.weather === "特强浓雾") {
    imgData.value = "/img/weather/雾.png"
  } else if (weather.weather === "热") {
    imgData.value = "/img/weather/hot.png"
  } else if (weather.weather === "冷") {
    imgData.value = "/img/weather/cold.png"
  }
  // endregion
}
</script>

<template>
  <div class="weather-box">
    <img v-if="props.showImage" :src="imgData"
         :style="{width: props.imgWidth + 'rem', height: props.imgHeight + 'rem'}" alt=""
         class="weather-image"/>
    <div v-if="props.showTemperature" class="weather-temperature">{{ temperature || 0 }}°C</div>
  </div>
</template>

<style lang="scss" scoped>
.weather-box {
  display: flex;

  .weather-image {
    object-fit: cover;
  }

  .weather-temperature {
    font-family: Alibaba PuHuiTi Medium, serif;
    margin-left: 6rem;
    font-weight: 500;
    font-size: 18rem;
    color: #E0E0E0;
    line-height: 25rem;
  }
}
</style>